<template>
  <div>
    <div class="detail-info-imgs">
      <!-- 图片预览 -->
      <div
        v-for="(item, idx) in imgList"
        :key="item"
        @click="ImagePreview(imgList)"
      >
        <img :src="item" alt="" />
        <span class="circle" @click.stop="emit('delImg', idx)" v-if="delFlag">
          <svg-icon icon-class="close" />
        </span>
      </div>

      <!-- 视频预览 -->
      <div
        v-for="item in videoList"
        :key="item"
        @click="videoPreRef.toggleShow(item)"
      >
        <!-- <img :src="item" alt="" /> -->
        <video>
          <source :src="item">
        </video>
        <span class="circle" @click.stop="emit('delVideo')" v-if="delFlag">
          <svg-icon icon-class="close" />
        </span>
        <span class="video">
          <svg-icon icon-class="play" />
        </span>
      </div>
    </div>
    <VideoPreview ref="videoPreRef" />
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { ImagePreview } from "vant";
import VideoPreview from "@/components/videoPreview/index.vue";
defineProps({
  imgList: Array,
  videoList: Array,
  delFlag: {
    default: false,
    type: Boolean,
  },
});
const emit = defineEmits(["delImg", "delVideo"]);
const videoPreRef = ref();
</script>

<style lang="less" scoped>
.detail-info-imgs {
  margin-top: 8px;
  display: grid;
  grid-template-columns: 33.33% 33.33% 33.33%;
  align-items: center;
  column-gap: 10px;
  
  > div {
    position: relative;
    width: 108px;
    height: 108px;
    border-radius: 4px;
    margin-bottom: 8px;

    img,
    video {
      width: 100%;
      height: 100%;
    }
  }

  .circle {
    position: absolute;
    top: 3px;
    right: 3px;
    background: rgba(0, 0, 0, 0.3);
    display: inline-block;
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    border-radius: 20px;
  }
  .video {
    position: absolute;
    top: 40px;
    left: 40px;
    svg {
      width: 32px;
      height: 32px;
    }
  }
}
</style>
